<template>
	<view class="container">
		<!-- <u-navbar leftIconSize="40" placeholder titleStyle="font-size:36rpx;font-weight:600;" title="预览" bgColor="#ffffff" :autoBack="true"></u-navbar> -->
		<view class="p-rel">
			<image class="preview-image" mode="widthFix" :src="fileurls?fileurls:annex"></image>
			<view class="p-abs left-0 top-0 w h bg-000-04 flex ai_center jc_center" v-if="!fileurls">
				<view class="text-24 text-white">预览生成中</view>
			</view>
			<view class="p-abs left-0 top-0 w h flex ai_center jc_center" v-else></view>
		</view>
		<view class="footer">
			<view class="footer-fixed flex">
				<view class="footer-btn2" @click="next">换一个{{num}}/3</view>
				<view class="footer-btn flex1" @click="born">消耗算力:{{cost}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cost:0,
				annex:'',
				fileurls:'',
				num:1,
				requestStatus:false
			}
		},
		onLoad(options) {
			this.annex = options.annex
			this.orderId = options.orderId
			this.cost = options.cost
			this.getPreviewStatus()
		},
		methods: {
			getPreviewStatus(){
				this.post('tool/preview_status',{
					order_id:this.orderId,
					num:this.num
				}).then(res=>{
					if(res.data.status == 'finished'){
						this.fileurls = res.data.fileurls
					}else{
						setTimeout(()=>{
							this.getPreviewStatus()
						},1000)
					}
				})
			},
			next(){
				if(this.num===3){
					return false
				}
				this.post('tool/preview',{
					order_id:this.orderId,
					num:this.num + 1
				}).then(res=>{
					this.num++
					this.fileurls = ''
					this.getPreviewStatus()
				})
			},
			born(){
				if(this.requestStatus){
					return false
				}
				this.requestStatus = true
				uni.showModal({
					title:'提示',
					content:'是否确定消耗'+this.cost+'算力！',
					success: (res) => {
						if(res.confirm){
							this.post('tool/add_order',{
								order_id:this.orderId,
								num:this.num
							}).then(res=>{
								this.requestStatus = false
								uni.switchTab({
									url:'/pages/user/user'
								})
							}).catch(res=>{
								this.requestStatus = false
								uni.showToast({
									title:res.msg,
									icon:'none',
									success: (res) => {
										setTimeout(()=>{
											uni.navigateTo({
												url:'/pages/recharge/recharge'
											})
										},1500)
									}
								})
							})
						}else{
							this.requestStatus = false
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		padding:56rpx 54rpx 0;
		.preview-image{
			width: 100%;
			border-radius: 20rpx;
			background-color: #cccccc;
		}
		.footer{
			height: 114rpx;
			.footer-fixed{
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				padding:6rpx 30rpx 20rpx;
			}
			&-btn{
				height: 88rpx;
				background-image: linear-gradient(270deg,#17FEE9,#94FDC4);
				border-radius: 44rpx;
				line-height: 88rpx;
				text-align: center;
				font-size: 32rpx;
			}
			&-btn2{
				height: 88rpx;
				background-color: #F3F3F3;
				line-height: 88rpx;
				text-align: center;
				border-radius: 44rpx;
				color:#9A9A9A;
				width: 266rpx;
				margin-right: 20rpx;
				font-size: 32rpx;
			}
		}
	}
</style>
